<template>
  <div class="device-grid">
    <!-- 只显示以 Junker 开头的设备 -->
    <div v-for="latheName in filteredLatheNames" :key="latheName" class="device-item"
         :class="[
           getLatheNameStatus(latheName),
           { active: currentDevice.latheName === latheName },
           { 'auto-hover-active': autoHoverDeviceName === latheName }
         ]"
         @click="selectLatheNameDevice(latheName)"
         @mouseenter="handleDeviceItemMouseEnter()"
         @mouseleave="handleDeviceItemMouseLeave()">
      <div class="device-icon">
        <img :src="getLatheNameIcon(latheName)" alt="device icon" @error="handleImageError">
      </div>
      <!-- 添加悬浮提示框 -->
      <div class="device-tooltip"
           :class="[getStatusClass(getLatheNameStatus(latheName)), { 'auto-tooltip-active': autoHoverDeviceName === latheName }]">
        <span>{{ latheName }}</span>
        <span class="status-line">
          状态: {{ getLatheNameStatus(latheName) }}
        </span>
        <span v-if="getLatheNameStatus(latheName) === '故障'" class="ai-tooltip-btn" @click.stop="inquiryFromLog({ deviceName: latheName })">
          <i class="el-icon-service"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceGrid',
  props: {
    uniqueLatheNames: {
      type: Array,
      default: () => []
    },
    currentDevice: {
      type: Object,
      required: true
    },
    autoHoverDeviceName: {
      type: String,
      default: null
    },
    getLatheNameStatus: {
      type: Function,
      required: true
    },
    getLatheNameIcon: {
      type: Function,
      required: true
    }
  },
  computed: {
    // 过滤出以 Junker 开头的设备名称
    filteredLatheNames() {
      return this.uniqueLatheNames.filter(name => name);
    }
  },
  watch:{
    // 监听 uniqueLatheNames 变化
    uniqueLatheNames: {
      handler(newVal, oldVal) {
        console.log('设备列表发生变化:', { newVal, oldVal });
        // 可以在这里执行额外的逻辑
        this.$emit('device-list-changed', {
          filteredCount: this.filteredLatheNames.length,
          totalCount: newVal.length
        });
      },
      immediate: true, // 立即执行一次
      deep: true // 深度监听
    }
  },
  methods: {

    getStatusClass(status) {
      const statusMap = {
        '正常': 'normal',
        '故障': 'warning',
        '待机': 'waiting',
        '离线': 'offline'
      };
      return statusMap[status] || 'offline';
    },

    selectLatheNameDevice(latheName) {
      this.$emit('select-lathe-name-device', latheName);
    },

    handleDeviceItemMouseEnter() {
      this.$emit('device-item-mouse-enter');
    },

    handleDeviceItemMouseLeave() {
      this.$emit('device-item-mouse-leave');
    },

    handleImageError(e) {
      console.error('图片加载失败');
      e.target.src = require('@/assets/detect/offline.png');
    },

    inquiryFromLog(log) {
      this.$emit('inquiry-from-log', log);
    }
  }
}
</script>

<style lang="scss" scoped>
.device-grid {
  width: 675px;
  height: 655px;
  margin: auto;
  background: transparent;
  border: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  transform: rotate(328deg) scale(0.70);
  transform-origin: center;

  .device-item {
    position: relative;
    background: transparent;
    border: none;
    width: 93px;
    height: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-330deg);
    margin: 0;

    // 第一行保持原位
    &:nth-child(-n+7) {
      top: 50px;
      left: -130px;
    }

    // 第二行设备向上移动
    &:nth-child(n+8):nth-child(-n+14) {
      top: 20px;
      left: -80px;
    }

    // 第三行设备向上移动更多
    &:nth-child(n+15):nth-child(-n+21) {
      top: -10px;
      left: -10px;
    }

    // 第四行设备向上移动
    &:nth-child(n+22):nth-child(-n+28) {
      top: -50px;
      left: 50px;
    }

    // 第五行设备向上移动最多
    &:nth-child(n+29):nth-child(-n+35) {
      top: -90px;
      left: 120px;
    }

    // 保持原有的行间距设置
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(8),
    &:nth-child(9),
    &:nth-child(10),
    &:nth-child(15),
    &:nth-child(16),
    &:nth-child(17),
    &:nth-child(18),
    &:nth-child(19),
    &:nth-child(20),
    &:nth-child(21),
    &:nth-child(22),
    &:nth-child(23),
    &:nth-child(26),
    &:nth-child(27),
    &:nth-child(28),
    &:nth-child(33),
    &:nth-child(34),
    &:nth-child(35) {
      margin: 0 0 55px 0;
    }

    .device-icon {
      width: 85px;
      height: 85px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease-in-out;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    // 添加悬浮提示框样式
    .device-tooltip {
      display: none;
      position: absolute;
      bottom: 130%;
      left: 50%;
      transform: translateX(-50%) translateY(10px) perspective(600px) rotateX(5deg);
      padding: 16px 20px;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1.6;
      white-space: nowrap;
      z-index: 1000;
      pointer-events: none;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.1) inset;
      min-width: 200px;
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      visibility: hidden;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      overflow: hidden;
      transform-origin: bottom center;

      // 添加背景动态光效
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 80%);
        opacity: 0.8;
        z-index: -1;
        transition: opacity 0.3s ease;
      }

      // 自动悬浮激活时的样式
      &.auto-tooltip-active {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) perspective(600px) rotateX(0);
        animation: tooltip-pulse 2s infinite alternate ease-in-out;
      }

      // 根据状态改变整个提示框的颜色和效果
      &.normal {
        background: linear-gradient(135deg, rgba(32, 184, 78, 0.85), rgba(32, 184, 78, 0.6));
        border: 1px solid rgba(32, 184, 78, 0.6);
        color: #ffffff;
        box-shadow: 0 8px 32px rgba(32, 184, 78, 0.3), 0 0 15px rgba(32, 184, 78, 0.2);
      }

      &.warning {
        background: linear-gradient(135deg, rgba(255, 43, 43, 0.85), rgba(255, 43, 43, 0.6));
        border: 1px solid rgba(255, 43, 43, 0.6);
        color: #ffffff;
        box-shadow: 0 8px 32px rgba(255, 43, 43, 0.3), 0 0 15px rgba(255, 43, 43, 0.2);
      }

      &.waiting {
        background: linear-gradient(135deg, rgba(255, 179, 0, 0.85), rgba(255, 179, 0, 0.6));
        border: 1px solid rgba(255, 179, 0, 0.6);
        color: #ffffff;
        box-shadow: 0 8px 32px rgba(255, 179, 0, 0.3), 0 0 15px rgba(255, 179, 0, 0.2);
      }

      &.offline {
        background: linear-gradient(135deg, rgba(128, 128, 128, 0.85), rgba(128, 128, 128, 0.6));
        border: 1px solid rgba(128, 128, 128, 0.6);
        color: #ffffff;
        box-shadow: 0 8px 32px rgba(128, 128, 128, 0.3), 0 0 15px rgba(128, 128, 128, 0.2);
      }

      // 小三角样式，根据状态改变颜色
      &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid transparent;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
        transition: all 0.3s ease;
      }

      &.normal::after {
        border-top-color: rgba(32, 184, 78, 0.8);
      }

      &.warning::after {
        border-top-color: rgba(255, 43, 43, 0.8);
      }

      &.waiting::after {
        border-top-color: rgba(255, 179, 0, 0.8);
      }

      &.offline::after {
        border-top-color: rgba(128, 128, 128, 0.8);
      }

      // 内容样式改进
      span {
        display: block;
        margin: 4px 0;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

        &:first-child {
          margin-top: 0;
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          padding-bottom: 8px;
          text-align: center;
          letter-spacing: 0.5px;
        }

        &.status-line {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;

          // 添加状态图标
          &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      // 状态图标颜色
      &.normal .status-line::before {
        background-color: #ffffff;
        box-shadow: 0 0 8px #ffffff;
      }

      &.warning .status-line::before {
        background-color: #ffffff;
        box-shadow: 0 0 8px #ffffff;
        animation: blink 1s infinite;
      }

      &.waiting .status-line::before {
        background-color: #ffffff;
        box-shadow: 0 0 8px #ffffff;
      }

      &.offline .status-line::before {
        background-color: rgba(255, 255, 255, 0.6);
      }
    }

    // 添加鼠标悬浮时显示提示框的样式
    &:hover {
      .device-tooltip {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) perspective(600px) rotateX(0);
        animation: tooltip-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      // 手动悬浮时，图标放大
      .device-icon {
        transform: scale(1.15);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        img {
          animation: none; // 停止呼吸动画，确保手动悬浮效果优先
        }
      }
    }

    // 当设备被自动轮播选中时，应用呼吸动画
    &.auto-hover-active {
      .device-icon img {
        animation: breathingEffect 2s ease-in-out infinite;
      }

      // 当提示框激活时，确保图标明显地高亮
      &:hover .device-icon {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
      }
    }
  }
}

// 定义动画
@keyframes breathingEffect {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes tooltip-pulse {
  0%, 100% {
    transform: translateX(-50%) translateY(0) perspective(600px) rotateX(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-2px) perspective(600px) rotateX(0) scale(1.02);
  }
}

@keyframes tooltip-entrance {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) perspective(600px) rotateX(5deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) perspective(600px) rotateX(0) scale(1);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}
</style>
